<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>BSC-时钟</title>
    <link rel="stylesheet" href="../../css/clock.css" />
    <script>
      if (window.innerWidth > window.innerHeight) {
        document.documentElement.style.fontSize = window.innerWidth / 10 + "px";
      } else {
        document.documentElement.style.fontSize =
          window.innerHeight / 10 + "px";
      }
    </script>
  </head>
  <body>
    <div id="wrapper" style="display: none">
      <div class="timeBox year" id="yearBox"></div>
      <div class="timeBox monthBox" id="monthBox"></div>
      <div class="timeBox dateBox" id="dateBox"></div>
      <div class="timeBox hourBox" id="hourBox"></div>
      <div class="timeBox minuteBox" id="minuteBox"></div>
      <div class="timeBox secondBox" id="secondBox"></div>
    </div>

    <script>
      let wrapper = document.getElementById("wrapper");
      let yearBox = document.getElementById("yearBox");
      let monthBox = document.getElementById("monthBox");
      let dateBox = document.getElementById("dateBox");
      let hourBox = document.getElementById("hourBox");
      let minuteBox = document.getElementById("minuteBox");
      let secondBox = document.getElementById("secondBox");

      /*
       * 找所有的东西标签函数
       * */
      let findSiblings = function (tag) {
        let parent = tag.parentNode;
        let children = parent.children;
        let sb = [];
        for (let i = 0; i <= children.length - 1; i++) {
          if (children[i] !== tag) {
            sb[sb.length] = children[i];
          }
        }
        return sb;
      };

      /*
       * 去掉所有兄弟的类
       * */
      let removeSiblingClass = function (tag) {
        let sb = findSiblings(tag);
        for (let i = 0; i <= sb.length - 1; i++) {
          sb[i].className = "";
        }
      };

      /*
       * 初始化年份份函数
       * */
      let initYear = function () {
        let span = document.createElement("span");
          span.innerHTML = (new Date()).getFullYear() + "年";
          yearBox.appendChild(span);
      };

      /*
       * 初始化月份函数
       * */
      let initMonth = function () {
        for (let i = 1; i <= 12; i++) {
          let span = document.createElement("span");
          span.innerHTML = i + "月";
          monthBox.appendChild(span);
        }
      };

      // 初始化日期
      let initDate = function () {
        for (let i = 1; i <= 31; i++) {
          let span = document.createElement("span");
          span.innerHTML = i + "日";
          dateBox.appendChild(span);
        }
      };

      // 初始化小时，分钟，秒
      let initHour = function () {
        for (let i = 0; i <= 23; i++) {
          let h = i;
          let span = document.createElement("span");
          if (h < 10) {
            h = "0" + h;
          }
          span.innerHTML = h + "点";
          hourBox.appendChild(span);
        }
      };
      let initMinute = function () {
        for (let i = 0; i <= 59; i++) {
          let f = i;
          let span = document.createElement("span");
          if (f < 10) {
            f = "0" + f;
          }
          span.innerHTML = f + "分";
          minuteBox.appendChild(span);
        }
      };
      let initSecond = function () {
        for (let i = 0; i <= 59; i++) {
          let sec = i;
          let span = document.createElement("span");
          if (sec < 10) {
            sec = "0" + sec;
          }
          span.innerHTML = sec + "秒";
          secondBox.appendChild(span);
        }
      };

      // 时间文字样式切换函数
      let changeTime = function (tag) {
        tag.className = "on";
        removeSiblingClass(tag);
      };

      /*
       * 初始化日历函数
       * */
      let initCalendar = function () {
        initYear(); // 初始化年份
        initMonth(); // 初始化月份
        initDate(); // 初始化日期
        initHour(); // 小时
        initMinute();
        initSecond();
      };

      /*
       * 展示当前时间
       * 参数：currentDate 时间对象
       * */
      let showNow = function (currentDate) {
        let year = currentDate.getFullYear();
        let yue = currentDate.getMonth();
        let riqi = currentDate.getDate();
        let hour = currentDate.getHours();
        let minute = currentDate.getMinutes();
        let second = currentDate.getSeconds();
        // 时间文字样式切换函数
        changeTime(monthBox.children[yue]);
        changeTime(dateBox.children[riqi - 1]);
        changeTime(hourBox.children[hour]);
        changeTime(minuteBox.children[minute]);
        changeTime(secondBox.children[second]);
      };

      // 展示时间圆圈函数
      // tag：目标
      // num：数字数量
      // dis：圆圈半径
      let textRound = function (tag, num, dis) {
        let span = tag.children;
        for (let i = 0; i <= span.length - 1; i++) {
          span[i].style.transform =
            "rotate(" +
            (360 / span.length) * i +
            "deg)  translateX(" +
            dis +
            "px)";
        }
        wrapper.style.display = "block";
      };
      /*
       * 旋转指定“圆圈”指定度数
       * */
      let rotateTag = function (tag, deg) {
        tag.style.transform = "rotate(" + deg + "deg)";
      };

      let main = function () {
        initCalendar(); // 初始化日历
        setInterval(function () {
          let currentDate = new Date();
          showNow(currentDate); // 展示当前时间
        }, 1000);

        //  n秒后，摆出圆形
        setTimeout(function () {
          wrapper.className = "wrapper";
          textRound(monthBox, 12, 140);
          textRound(dateBox, 31, 180);
          textRound(hourBox, 24, 220);
          textRound(minuteBox, 60, 260);
          textRound(secondBox, 60, 300);
          setInterval(function () {
            let currentDate = new Date();
            rotateTag(monthBox, -30 * currentDate.getMonth());
            rotateTag(dateBox, (-360 / 31) * (currentDate.getDate() - 1));
            rotateTag(hourBox, (-360 / 24) * currentDate.getHours());
            rotateTag(minuteBox, -6 * currentDate.getMinutes());
            rotateTag(secondBox, -6 * currentDate.getSeconds());
          }, 1000);
        }, 1000);
      };
      main();
    </script>
  </body>
</html>
